<template>
   <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <div>
      <el-table :data="tableData" border @current-change="currentChange" @selection-change="selectionChange" style="width: 100%">
        <el-table-column label="选择" width="100" align="center">
            <template #default="scope">
                <el-radio v-model="radio" :label="scope.row.name">&nbsp;</el-radio>
            </template>
        </el-table-column>
        <el-table-column type="selection" width="280" />
        <el-table-column prop="name" label="姓名" width="280" sortable />
        <el-table-column prop="city" label="城市" width="180" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="age" label="操作" fixed="right">
            <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
            </template>
        </el-table-column>
      </el-table>
        <div style="margin-top: 20px">
            <el-button @click="onSubmit">选中行</el-button>
        </div>
    </div>

    <!--分页-->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </el-card>
</template>

<script>
    export default {
        name: "A",
        data() {
            return {
                tableData: [
                    {
                        name: '张三',
                        city: '北京',
                        age: '28'
                    },
                    {
                        name: '李四',
                        city: '北京',
                        age: '28'
                    },
                    {
                        name: '王五',
                        city: '北京',
                        age: '28'
                    }
                ],
                radio: '',
                checkbox: '',
                pageSize: 10,  // 默认页码
                pageNum: 1, // 默认每页条数
                total: 100, // 总条数
            }
        },
        methods: {
            currentChange(val) {  // val是当前行
                console.log('单选: ', val);
                this.radio = val.name;
            },
            selectionChange(val) {
                console.log('多选：', val);
                this.checkbox = val;
            },
            onSubmit() {
                console.log('单选: ', this.radio);
                console.log('多选：', this.checkbox)
            },
            // 编辑按钮
            handleEdit(index,row) {
                console.log(index,row)
            },
            // 删除按钮
            handleDelete(index,row) {
                console.log(index,row)
            },
            // 监听选择每页条目改变的事件
            handleSizeChange(newPageSize) {
                console.log(newPageSize);
                this.pageSize = newPageSize;
                console.log(this.pageNum, this.pageSize) // 实际提交后端API
            },
            // 监听页面改变的事件
            handleCurrentChange(newCurrentPage) {
                console.log(newCurrentPage);
                this.pageNum = newCurrentPage;
                console.log(this.pageNum, this.pageSize) // 实际提交后端API
            }
        }
    }
</script>

<style scoped>

</style>